<template>
  <f7-page>
    <!-- <f7-navbar :sliding="false">
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>自定义组件</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar> -->
    <f7-user-navbar title="自定义SmartSelect"></f7-user-navbar>

    <f7-custom-smart-select
      title="单选测试"
      id="id"
      listStyle="margin: 0;"
      :defaultVal="''"
      idProp="appId"
      nameProp="appName"
      url="/api/app/mobileApp/query"
      @done="done"
      :multiple="false"
      :searchDelay="2000"
    >
      <template name="before">单选测试，前</template>
      <template name="after">单选测试，后</template>
    </f7-custom-smart-select>

    <f7-custom-smart-select
      title="多选测试"
      id="id2"
      listStyle="margin: 0;"
      :defaultVal="''"
      idProp="appId"
      nameProp="appName"
      url="/api/app/mobileApp/query"
      @done="done"
      :multiple="true"
      :searchDelay="2000"
    >
      <template name="before">多选测试，前</template>
      <template name="after">多选测试，后</template>
    </f7-custom-smart-select>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      query: [],
      model: []
    };
  }

  mixin() {
    return {
      data() {
        return {};
      },
      methods: {
        done(retVals) {
          console.log(retVals);
        }
      },
      computed: {},
      mounted() {}
    };
  }
}
</script>

<style scoped>
</style>
